
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container col-md-4 pt-5">
    <h2 class="text-muted">增加书籍</h2>
    <form action="${pageContext.request.contextPath}/book/AddBook" class="needs-validation" novalidate method="post">
        <div class="form-floating mb-3 mt-3">
            <input type="text" class="form-control" id="id" placeholder="Id" name="bookID" required>
            <label for="id">书籍编号:</label>
            <div class="invalid-feedback">请输入书籍编号！</div>
        </div>
        <div class="form-floating mb-3 mt-3">
            <input type="text" class="form-control" id="name" placeholder="name" name="bookName" required>
            <label for="name">书籍名称:</label>
            <div class="invalid-feedback">请输入书籍名称！</div>
        </div>
        <div class="form-floating mb-3 mt-3">
            <input type="text" class="form-control" id="count"  placeholder="count" name="bookCounts" required>
            <label for="count">数量:</label>
            <div class="invalid-feedback">请输入数量！</div>
        </div>
        <div class="form-floating mb-3 mt-3">
            <input type="text" class="form-control" id="detail" placeholder="detail" name="detail" required>
            <label for="detail">详情:</label>
        </div>
        <button type="submit" class="btn btn-primary">提交</button>
    </form>
</div>
<script>
    // 如果验证不通过禁止提交表单
    (function() {
        'use strict';
        window.addEventListener('load', function() {
            // 获取表单验证样式
            let forms = document.getElementsByClassName('needs-validation');
            // 循环并禁止提交
            Array.prototype.filter.call(forms, function (form) {
                form.addEventListener('submit', function (event) {
                    if (form.checkValidity() === false) {
                        event.preventDefault();
                        event.stopPropagation();
                    }
                    form.classList.add('was-validated');
                },false);
            });
        }, false);
    })();
</script>
</body>
</html>
